<template>
  <el-main>
    <div class="con1_box">
      <div>
        <el-form ref="form" label-width="80px">
          <el-row>
            <el-col :span="20">
              <el-form-item label="部门编号">
                <!-- v-model="form.epmID" -->
                <el-input v-model="form.empId" placeholder="请输入员工编号" clearable></el-input>
              </el-form-item>
              <el-form-item label="部门名称">
                <el-input v-model="form.name" placeholder="请输入员工姓名" clearable></el-input>
              </el-form-item>
              <el-form-item style="width: 100px;margin-left:0px !important">
                <el-button type="primary" icon="el-icon-search" @click="searchData" style="margin-bottom: 20px;">搜索</el-button>
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row :gutter="10" class="right_box">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd">新增机构</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            size="mini"
           >导出</el-button>
           <!--  @click="handleExport" -->
        </el-col>
      </el-row>
        </el-form>
        <!-- :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize) -->
        <el-table :data="tableData.staffList" :stripe="stripe" v-loading="loading"
          :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
          :default-sort="{ prop: 'hire_date', order: 'descending' }" :current-page.sync="currentPage" border sortable>
          <el-table-column fixed="left" type="selection" width="60"></el-table-column>
          <el-table-column prop="empId" label="员工编号" width="150"></el-table-column>
          <el-table-column prop="name" label="员工姓名" width="150"></el-table-column>
          <el-table-column prop="deptName" label="所属部门" width="200"></el-table-column>
          <el-table-column prop="birth_date" label="出生日期" width="150"></el-table-column>
          <!-- 方式一 prop="date" -->
          <el-table-column prop="hire_date" label="入职日期" width="150" sortable></el-table-column>
          
          <el-table-column prop="address" label="家庭地址"></el-table-column>
          <el-table-column prop="is_enable" label="是否启用" width="100"
          :filters="[{ text: '是', value: '是' }, { text: '否', value: '否' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.is_enable === '是' ? 'success' : 'danger'"
                disable-transitions>{{scope.row.is_enable}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="状态" width="100" style="text-align: center;"
          :filters="[{ text: '在职', value: '在职' }, { text: '离职', value: '离职' }]"
          :filter-method="filterType"
          filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.type === '在职' ? 'success' : 'danger'"
                disable-transitions>{{scope.row.type}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <router-link :to="{ path: '/emp/edit', query: { Id: scope.row.empId, type: 'edit' } }" title="编辑">
                <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-left: 10px;"></el-button>
              </router-link>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delContent(scope.row.id)"
                style="margin-left: 10px;" title="删除"></el-button>
            </template>

          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :hide-on-single-page="show" :page-sizes="[10, 20, 50]" :page-size="tableData.pagesize"
        :current-page.sync="currentPage" layout="total,sizes, prev, pager, next, jumper" :total="tableData.total">
      </el-pagination>
    </div>
  </el-main>
</template>
<script>
//  引入左侧菜单组件
import { getStaffList } from '@/api/newUsertest'
export default {
  components: {},
  data () {
    return {
      loading: false,
      // direction: 'ltr',
      input3: '', //搜索关键词
      select: '',  //下拉框选择
      stripe: true,//是否为斑马纹 table
      // 页码
      currentPage: 1,
      pagesize: 10,
      total: 0,
      // tableData: Array(50).fill(item),
      show: false,
      needTagsView: true, //标签是否显示
      fixedHeader: false,
      screenWidth: null, //屏幕宽度

      activeTabs: 'all',  //tabs 

      columnActive: "/",
      // 模拟列表数据
      tableData: [],
      dept:[{
          value: '0',
          label: '行政办公室'
        }, 
        {
          value: '1',
          label: '人力资源部'
        }, 
        {
          value: '2',
          label: '工会办公室'
        }, 
        {
          value: '3',
          label: '安全监察'
        }, 
        {
          value: '4',
          label: '质控管理部'
        }, 
        {
          value: '5',
          label: '信息技术部'
        }, 
        {
          value: '6',
          label: '数智企业部'
        }
      ],
      // 搜索字段
      form: {
        empId: '',  //搜索输入的值 姓名
        name: '',//搜索输入的值 所属单位
        deptName: '', //部门名称
        is_enable:'',
        hire_date:[] //入职日期
      },


    }
  },
  computed: {

  },

  mounted () {  //挂载后
    this.fetchData()
  },
  watch: {
    screenWidth: {
      handler: function (val) {
        
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    fetchData () {
      this.GetList()
    },
    handleSizeChange (val) {
      this.pagesize = val;
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      this.GetList()
    },
    // 员工账号是否启用
    filterTag(value, row) {
      return row.is_enable === value;
    },
    // 员工状态
    filterType(value, row) {
      return row.type === value;
    },
    // 查询数据
    statusChange () {
      console.log(this.form.is_enable)
      // this.getNoticeList()
    },
    // 获取列表数据
    GetList () {
      // debugger;
      // if (JSON.parse(localStorage.getItem("columnKeyObj")).pageKey == "ds_HYWJ_YGTH"&&this.activeTabs == 'all') {
      //     this.columnActive = JSON.parse(localStorage.getItem("columnKeyObj")).pageKey;
      //     this.tableData = this.tableData1
      // } else{
      this.loading = true;
      let params = {
        key: this.input_name,
        pageSize: 10,
        currentPage: this.currentPage,
        form: this.form
      };
      getStaffList({ params }).then(res => {
        if (res.code == 20000) {
          this.tableData = res.data
          this.currentPage = res.data.pagenum
          this.loading = false;
        }
      })
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      if (row != undefined) {
        this.form.parentId = row.id;
      }
      this.open = true;
      this.title = "新增机构";
      this.getList()
      
    },
    // 查看
    handleClick (res) {
      console.log(res)
      const h = this.$createElement;
      this.$msgbox({
        title: '查看',
        center: true,
        message: h('div', { style: 'text-align: left;' }, [
          h('p', null, [
            h('span', null, '日期: '),
            h('span', { style: 'color: teal;margin-left:20px;' }, res.date)
          ]),
          h('p', { style: 'margin-top:10px;' }, [
            h('span', null, '姓名: '),
            h('span', { style: 'color: teal;margin-left:20px;' }, res.name)
          ]),
          h('p', { style: 'margin-top:10px;' }, [
            h('span', null, '地址: '),
            h('span', { style: 'color: teal;margin-left:20px;' }, res.address)
          ]),
        ]),
        showCancelButton: true,
        confirmButtonText: '导出',
        cancelButtonText: '关闭',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        }
      }).then(action => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        });
      }).catch(action => {

      });
    },
    // 编辑
    editTap (res) {
      debugger
      let routerData = this.$router.resolve("/test/edit/" + res.id);
      window.open(routerData.href, "_blank");
    },
    // 删除
    deleteRow (index, rows) {
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 搜索
    searchData () {
      this.loading = true;
      this.GetList()
      // const search = this.input_name;
      // const search2 = this.input_unit;
      // debugger;
      //   if(search!==''){
      //     this.tableData=this.tableData.filter((dataNews) => {
      //       return Object.keys(dataNews).some((key) => {
      //         return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
      //       });
      //     })

      //   }
      //   if(search2!==''){
      //     this.tableData=this.tableData.filter((dataNews) => {
      //       return Object.keys(dataNews).some((key) => {
      //         return String(dataNews[key]).toLowerCase().indexOf(search2) > -1;
      //       });
      //     })

      //   }
      //   if(search==''&&search2==''){
      //       this.tableData = this.tableData1
      //   }
      //   setTimeout(() => {
      //       this.loading = false;
      //     }, 500);

    }

  }
}
</script>
<style>

.cell {
  white-space: nowrap !important;
}

.el-drawer {
  display: block;
  min-width: 200px !important;
}

.el-drawer__body {
  overflow: hidden;
}
.date_picker {
  white-space: nowrap;
  width: 545px !important;
}
@media(min-width:1200px) {
  .el-drawer {
    display: none;
  }
}
@media(max-width:588px) {
  .date_picker {
    white-space: normal;
    text-align:center;
  }
}
@media(max-width:450px) {
  .el-main {
    padding: 10px;
  }
}


</style>
<style scoped lang="scss">
.right_box{
    float: right;
    margin-bottom: 20px;
  }
.el-scrollbar__wrap {
  overflow: hidden;
}

.con1_box {
  text-align: right;
}

.el-popper {
  margin-top: 0;
}

.el-form {
  .el-form-item {
    float: left;
    width: 300px;
  }
}

.el-input-group {
  width: 100%;
}

.pagination {
  margin-top: 30px;
}

.hidden-lg-and-up .el-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 20px;
}

.hidden-lg-and-up .el-button:hover {
  color: unset;
}

.mobile_nav>.el-menu {
  width: 200px;
  background-color: #fff;
  box-shadow: 1px 2px 3px #000;
  text-align: left;
}

@media screen and (max-width:1200px) {
  .el-main {
    width: 100%;
  }

  .menu_box {
    height: 100%;
  }

}
</style>
